import React, { useState, useEffect, useCallback } from 'react';
import type { ProColumns, ProTableProps } from '@ant-design/pro-table';
import { ProTable, MyProTableProps } from '@/components/KaiyaTable/index';
import { Modal, Tree, Select, Input, Button } from 'antd';
import { FilterOutlined, PlusOutlined } from '@ant-design/icons';
import request from 'umi-request';
const UserManage: React.FC = () => {
  const [departmentTree, setdepartmentTree] = useState([]);
  const [checkedKeys, setcheckedKeys] = useState([]);
  const [checkedTitles, setcheckedTitles] = useState([]);
  const [treeModalVisible, settreeModalVisible] = useState<boolean | undefined>(
    false,
  );
  const TableCustomDeploy = {
    componentName: 'customTable',
  };
  useEffect(() => {
    getDepartmentTreeByRole();
  }, []);
  const requestHandle = async (params: any) => {
    let res = await request('/api/users', {
      method: 'GET',
      params,
    });
    return Promise.resolve(res);
  };

  const getDepartmentTreeByRole = async () => {
    let res = await request('/api/users/getDepartmentTreeByRole', {
      method: 'GET',
    });
    console.log(res.data);
    setdepartmentTree(res.data);
  };
  const modalOkHandle = () => {
    console.log('ok');
  };
  const getTableBasicDeploy = (): ProTableProps<any, any, any> => {
    const columns: ProColumns[] = [
      {
        dataIndex: 'index',
        title: '序号',
        valueType: 'indexBorder',
      },
      {
        title: '用户名',
        dataIndex: 'name',
        valueType: 'text',
        order: 1,
      },
      {
        title: '用户类型',
        dataIndex: 'userType',
        valueType: 'text',
        order: 3,
      },
      {
        title: '创建者',
        dataIndex: 'createname',
        valueType: 'text',
        hideInSearch: true,
      },
      {
        title: '创建日期',
        dataIndex: 'date',
        valueType: 'text',
        hideInSearch: true,
      },
      {
        title: '归属机构',
        dataIndex: 'jigou',
        valueType: 'text',
        order: 4,
        renderFormItem: (_, { defaultRender }) => {
          return (
            <Input
              value={
                checkedTitles?.length > 0 ? checkedTitles.join('，') : '请选择'
              }
              onClick={() => {
                settreeModalVisible(true);
              }}
            />
          );
        },
      },
      {
        title: '状态',
        dataIndex: 'stauts',
        valueType: 'select',
        order: 2,
        valueEnum: {
          0: { text: '正常', status: 'Success' },
          1: { text: '停用', status: 'Error' },
          2: { text: '锁定', status: 'Default' },
        },
      },
      {
        title: '操作',
        valueType: 'option',
        render: (text, record, _, action) => [
          <a
            href={record.url}
            target="_blank"
            rel="noopener noreferrer"
            key="view"
          >
            编辑
          </a>,
          <a
            href={record.url}
            target="_blank"
            rel="noopener noreferrer"
            key="view"
          >
            重置密码
          </a>,
          <a
            href={record.url}
            target="_blank"
            rel="noopener noreferrer"
            key="view"
          >
            删除
          </a>,
          <a
            href={record.url}
            target="_blank"
            rel="noopener noreferrer"
            key="view"
          >
            更多
          </a>,
        ],
      },
    ];
    const rowSelection = {
      onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          'selectedRows: ',
          selectedRows,
        );
      },
      getCheckboxProps: (record: any) => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      }),
    };
    return {
      columns,
      request: async (params = {}, sort, filter) => {
        console.log('request请求发出', params, filter);
        // return request<{data: [];}>('https://proapi.azurewebsites.net/github/issues', {
        //   params,
        // });
        return requestHandle(params);
      },
      rowSelection: {
        type: 'checkbox',
        ...rowSelection,
      },
      pagination: {
        pageSize: 5,
      },
      rowKey: 'id',
      toolBarRender: () => [
        // <Button icon={<FilterOutlined />}>查询</Button>,
        <Button icon={<PlusOutlined />}>新增</Button>,
        <Button>解锁</Button>,
        <Button>停用</Button>,
        <Button>启用</Button>,
      ],
    };
  };
  const jsonOption: MyProTableProps = {
    TableCustomDeploy,
    TableBasicDeploy: getTableBasicDeploy,
  };
  return (
    <div>
      <Modal
        title="组织架构"
        visible={treeModalVisible}
        onOk={() => {
          settreeModalVisible(false);
        }}
        onCancel={() => {
          settreeModalVisible(false);
        }}
        // style={{
        //   overflowY: 'auto',
        // }}
      >
        <Tree
          style={{ maxHeight: '50vh', overflowY: 'auto' }}
          checkable
          autoExpandParent={true}
          checkedKeys={checkedKeys}
          onCheck={(checkedKeysValue: any, checkedRow: any) => {
            let rowsByTitle = checkedRow.checkedNodes.map(
              (item: any) => item.title,
            );
            setcheckedTitles(rowsByTitle);
            setcheckedKeys(checkedKeysValue);
          }}
          treeData={departmentTree}
        />
      </Modal>
      <ProTable {...jsonOption}></ProTable>
    </div>
  );
};

export default UserManage;
